#include("LayuiHead.html")
<div class="layui-fluid layui-card">
    <div class="layui-tab layui-tab-brief">
        <ul class="layui-tab-title">
            <li class="layui-this">输入示例</li>
            <li>查看原码</li>
        </ul>
        <div class="layui-tab-content">
            <div class="layui-tab-item layui-show">
                <form action="" class="layui-form  margin-10" lay-filter="form">
                    <div class="layui-row">
                        <div class="layui-col-md12">
                            <div class="layui-form-item">
                                <label class="layui-form-label">下拉多选</label>

                                <div id="user_ids" class="layui-input-inline" style="min-width:400px"></div>
                            </div>
                        </div>
                    </div>
                    <div class="layui-row">
                        <div class="layui-col-md12">
                            <div class="layui-form-item">
                                <label class="layui-form-label">标题</label>

                                <div class="layui-input-inline" style="width:90px">
                                    <input name="test_color" value="#2a1515" class="layui-input"/>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="layui-row">
                        <div class="layui-col-md12">
                            <div class="layui-form-item">
                                <label class="layui-form-label">备注</label>

                                <div class="layui-input-block">
                                    <textarea name="test_desc" placeholder="请输入备注" class="layui-textarea" style="height:60px"></textarea>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <button type="submit" class="layui-btn" lay-submit="" lay-filter="Submit1">立即提交</button>
                            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                        </div>
                    </div>
                </form>
            </div>
            <div class="layui-tab-item">
                 <pre class="layui-code" lay-lang="HTML" lay-title="对应的HTML结构" encode="true">
                     &lt;div id="user_ids" class="layui-input-inline" style="min-width:400px"&gt;&lt;/div&gt;
                </pre>
                <pre class="layui-code" lay-lang="JS" lay-title="对应的JS代码">
 layui.use(['xmSelect'], function () {
        var $ = layui.$;
        xselect = layui.xmSelect.render({
            el: '#user_ids', filterable: true, delay: 1000, remoteSearch: false,
            remoteMethod: function (val, callBack, show) {
//                layui.$.ajax({
//                    type: 'GET', url: 'GetGhUserListApi', async: false, data: {s: val, tag_id: $("#tag_id").val()},
//                    success: function (res) {
//                        //callBack(res.data);
//                    },
//                    error: function (err) {
//                        //callBack([]);
//                    },
//                    dataType: "json"
//                });
            },
            template: function ({ item, sels, name, value }) {
                return item.name + '&lt;span style="position: absolute; right: 5px; color: #8799a3"&gt;' + item.hasselect + '&lt;/span&gt;'
            },
            data: [{value: 1, name: '中国', hasselect: '已选择'}, {value: 2, name: '美国', hasselect: '未选择'}]
        });

    });
                </pre>
                <pre class="layui-code" lay-lang="JS" lay-title="对应的JAVA代码">
				 /**
     * 查询工友信息接口Api
     */
    @Admins(roles = "login", name = "查询工友信息接口Api", log = false)
    public void GetGhUserListApi() {
        int tag_id = getParaInt("tag_id", 0);
        String s = getParaStr("s", "");
        s = "%" + s + "%";
        JsonResult result = JsonResult.getResult();
        List<GhUser> userlist = GhUser.dao.find("select * from gh_user where user_id like ? " +
                "or user_name like ?" +
                " or dept_name like ? limit 10", s, s, s);
        List list = new ArrayList();
        String has_userids = GhTagUtil.n().getHasSelectUserIdString(tag_id, userlist);
        for (GhUser user : userlist) {
            Jmode jm = Jmode.n().set("value", user.mod.getInt("user_id")).set("hasselect", "")
                    .set("name", user.mod.getStr("user_name") + " / " + user.mod.getStr("dept_name"));
            if (has_userids.indexOf("|" + user.mod.getInt("user_id") + "|") > -1) {
                jm.set("disabled", true).set("hasselect", "已添加");
            }
            list.add(jm);
        }
        result.setData(list);
        renderJson(result);
    }
				</pre>
            </div>
        </div>
    </div>
</div>
<script>
    var TreeInit = 'XmSelect';
    var xselect;
    layui.use(['xmSelect'], function () {
        var $ = layui.$;
        xselect = layui.xmSelect.render({
            el: '#user_ids', filterable: true, delay: 1000, remoteSearch: false,
            remoteMethod: function (val, callBack, show) {
//                layui.$.ajax({
//                    type: 'GET', url: 'GetGhUserListApi', async: false, data: {s: val, tag_id: $("#tag_id").val()},
//                    success: function (res) {
//                        //callBack(res.data);
//                    },
//                    error: function (err) {
//                        //callBack([]);
//                    },
//                    dataType: "json"
//                });
            },
            template: function ({ item, sels, name, value }) {
                return item.name + '<span style="position: absolute; right: 5px; color: #8799a3">' + item.hasselect + '</span>'
            },
            data: [{value: 1, name: '中国', hasselect: '已选择'}, {value: 2, name: '美国', hasselect: '未选择'}]
        });

    });

    layui.use(['form', 'myTool'], function () {
        layui.form.on('submit(Submit1)', function (data) {
            data.field.userids = xselect.getValue('valueStr');
            top.layer.alert('1:' + data.field.userids + '<br/>2:' + data.field.userids, {offset: "100px"});
            return false;
        });
    });

</script>
#include("LayuiBottom.html")